মিডিয়া কুয়েরি কি?
মিডিয়া কুয়েরি হলো সিএসএস(৩) এ সংযোজিত একটি পদ্ধতি যা ওয়েব পেজকে রেস্পন্সিভ করার জন্য ব্যবহার করা হয়।
সিএসএস মিডিয়া কুয়েরি ব্যবহারের জন্য @media ব্যবহার করা হয় এবং একটি প্রস্থ নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য স্টাইল ডিফাইন করা হয়।
রেসপন্সিভ মিডিয়া কুয়েরি (Responsive Media Query) - Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>এইচটিএমএল উদাহরণ</title>
<style>
body {
background-color:lightgreen;
}
@media only screen and (max-width: 500px) {
body {
background-color:lightblue;
}
}
</style>
</head>
<body>
<p> ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয়; যখন ডকুমেন্টের প্রস্থ 500 pixel হয়, তখন background-color হয় "lightblue" , অন্যথায় "lightgreen".
</p>
</body>
</html>
একটি ব্রেকপয়েন্ট যোগ করি
এর আগের টিউটোরিয়ালে সারি এবং কলাম দিয়ে একটি রেস্পন্সিভ ওয়েব পেজ তৈরি করেছিলাম, কিন্তু তা ছোট ডিভাইসে ভালো দেখায়নি।
মিডিয়া কুয়েরির সাহায্যে আমরা তা ঠিক করবোঃ
৭৬৮পিক্সেলের নিচের ডিভাইসের জন্য মিডিয়া কুয়েরি ডিফাইন করিঃ
রেসপন্সিভ মিডিয়া কুয়েরি (Responsive Media Query) - Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>এইচটিএমএল উদাহরণ</title>
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>ঢাকা</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li>খাদ্য</li>
</ul>
</div>
<div class="col-6">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে বিশ্বে ২য়।</p>
</div>
<div class="col-3 right">
<div class="aside">
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে। </p>
</div>
</div>
</div>
<div class="footer">
<p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>
মোবাইল ফার্স্ট ডিজাইন
মোবাইল ফার্স্ট মানে হচ্ছে, কম্পিউটার বা অন্যান্য বড় ডিভাইসের পূর্বে মোবাইলের জন্য ডিজাইন করা।
এর অর্থ এই যে আমাদের সিএসএস-এ কিছু পরিবর্তন করতে হবে।
স্ক্রিন সাইজ ৭৬৮ পিক্সেলের চেয়ে ছোট হলে স্টাইল পরিবর্তন না করে,৭৬৮ পিক্সেলের চেয়ে বড় হলে পরিবর্তন করবো। এটা আমাদের ডিজাইনকে মোবাইল ফার্স্ট করবেঃ
রেসপন্সিভ মিডিয়া কুয়েরি (Responsive Media Query) - Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>এইচটিএমএল উদাহরণ</title>
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>ঢাকা</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li> খাদ্য</li>
</ul>
</div>
<div class="col-6">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে বিশ্বে ২য়।</p>
</div>
<div class="col-3 right">
<div class="aside">
<p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
কাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।</p>
</div>
</div>
</div>
<div class="footer">
<p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>
ট্যাবলেটের জন্য ডিজাইন
আমরা ট্যাবলেট এবং মোবাইল ফোনের মাঝেও একটি ব্রেকপয়েন্ট যোগ করবো।
এই রকম করার জন্য আমরা আরেকটি মিডিয়া কুয়েরি (৬০০পিক্সেলে) এবং একসেট নতুন ক্লাস ব্যবহার করবো ৬০০ পিক্সেলের বড় (কিন্তু ৭৬৮ পিএক্সেলের ছোট) ডিভাইসের জন্যঃ
রেসপন্সিভ মিডিয়া কুয়েরি (Responsive Media Query) - Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>এইচটিএমএল উদাহরণ</title>
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>ঢাকা</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>ফ্লাইট</li>
<li>সিটি</li>
<li>দ্বীপসমুহ</li>
<li>খাদ্য</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>সিটি</h1>
<p>ঢাকা বাংলাদেশের রাজধানী।দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে বিশ্বে ২য়।</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<p>ঢাকা বাংলাদেশের রাজধানী।
দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে বিশ্বে ২য়।
প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে।</p>
</div>
</div>
</div>
<div class="footer">
<p> ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়।</p>
</div>
</body>
</html>
ইহা দেখতে অদ্ভুত হলেও আমরা একই রকম দুই সেট ক্লাস ব্যবহার করেছি,কিন্তু ইহা আমাদেরকে প্রতিটি ব্রেকপয়েন্টে কি ঘটবে তা নিয়ন্ত্রণ করার সুযোগ করে দিয়েছেঃ
এইচটিএমএল
<xmp><div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div></xmp>
উদাহরণের বর্ণনা
কম্পিউটারের জন্যঃ
প্রথম ও তৃতীয় সেকশন উভয়ে ৩ টি কলামে ভাগ হবে, আর মাঝেরটি ৬টি কলামে ভাগ হবে।
ট্যাবলেটের জন্যঃ
প্রথম সেকশন ৩টি কলামে ভাগ হবে, দ্বিতীয়টি ৯টি কলামে ভাগ হবে এবং তৃতীয়টি 12 টি কলামে ভাগ হবে আর প্রথম ও দ্বিতীয় কলামটির নিচে প্রদর্শিত হবে।
ওরিয়েন্টেশনঃ Portrait / Landscape
ব্রাউজার ওরিয়েন্টেশনের ফলে পেজের লে-আউট পরিবর্তন করতে মিডিয়া কুয়েরি ব্যবহার করা যায়ঃ
আপনি একসেট সিএসএস প্রোপার্টি রাখতে পারেন যেগুলো "Landscape" ওরিয়েন্টেশন বা ব্রাউজার উইন্ডোর উচ্চতা যখন প্রস্থের চেয়ে কম হবে তখন কাজ করবেঃ
রেসপন্সিভ মিডিয়া কুয়েরি (Responsive Media Query) - Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>এইচটিএমএল উদাহরণ</title>
<style>
body {
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>ব্রউজার উইন্ডোতে মাপ পরিবর্তন করা হয়ঃযখন ডকুমেন্টটের প্রস্থ দৈঘ্য অপেক্ষা বড় হয়,
তখন background-color হয় "lightblue" অন্যথায় "lightgreen".</p>
</body>
</html>
Content added || updated By
Read more
ভর্তি প্রস্তুতি || রাজশাহী বিশ্ববিদ্যালয় C- Unit মডেল টেস্ট(...
৳150
৳100
ভর্তি প্রস্তুতি || রাজশাহী বিশ্ববিদ্যালয় C- Unit মডেল টেস্ট(...
৳150
৳100
জাহাঙ্গীরনগর বিশ্ববিদ্যালয় মডেল টেস্ট । A ইউনিট
৳150
৳100
স্পেশাল মডেল টেস্ট🔥🎯 রাজশাহী বিশ্ববিদ্যালয় || 🎓 B Unit ||...
৳10
৳5
রাজশাহী বিশ্ববিদ্যালয় B unit (অ-বাণিজ্য) ফাইনাল মডেল টেস্ট
Free
